import { Avatar, Card, List, Statistic, Typography } from 'antd';
import { UserOutlined, HomeOutlined } from '@ant-design/icons';
import ProCard from '@ant-design/pro-card';
import { useEffect, useState } from 'react';
import { useRequest } from '@umijs/hooks';
import { getEquityLevelRank } from '@/services/zhirong/equity';
import { getEnterprisesDetails } from '@/services/zhirong/enterprise';
import style from '../style.less';

const { Title, Text, Paragraph } = Typography;
const BADGE_COLOR = ['#fe2d46', '#F60', '#FAA90E'];

const RankItem = (props) => {
  const [enterpriseDetails, setEnterpriseDetails] = useState({});
  const { run, loading } = useRequest(getEnterprisesDetails, {
    manual: true,
    onSuccess: (result, params) => {
      if (result && result.code === 0) {
        setEnterpriseDetails(result.data.enterpriseDetail);
      } else {
        console.log('msg:', result.msg);
      }
      console.log('loading:', loading);
    },
    onError: (err, params) => {
      console.log('err:', err);
    },
  });
  useEffect(() => {
    run({
      id: props.item.eid,
      ts: new Date().getTime(),
    });
  }, []);
  const handleClick = () => {
    props.onClick(props.item);
  };
  return (
    <ProCard.Group layout="center" style={{ marginTop: 8 }} gutter={8} ghost>
      <ProCard colSpan={4} layout="center" className={style.noPadding}>
        <div className={style.imgWrapper} style={{ backgroundImage: `url(${props.item.avatar})` }}>
          <div
            className={style.imgBadge}
            style={props.item.rank < 4 ? { backgroundColor: BADGE_COLOR[props.item.rank - 1] } : {}}
          >
            {props.item.rank}
          </div>
        </div>
      </ProCard>
      <ProCard colSpan={14}>
        <Title level={3}>
          <span className={style.rankListTitle} onClick={handleClick}>
            {props.item.name}
          </span>
        </Title>
        <Text>法定代表人：{enterpriseDetails?.repName}</Text>
        <Paragraph ellipsis={{ rows: 3 }} type="secondary">
          {enterpriseDetails?.scope}
        </Paragraph>
      </ProCard>
      <ProCard.Divider type={'vertical'} />
      <ProCard colSpan={2} layout="center" className={style.noPadding}>
        <Statistic title="股权网络层数" value={props.item.level} />
        {}
      </ProCard>
    </ProCard.Group>
  );
};

const RankList = (props) => {
  const [enterpriseList, setEnterpriseList] = useState([]);
  const { run, loading } = useRequest(getEquityLevelRank, {
    manual: true,
    onSuccess: (result, params) => {
      if (result && result.code === 0) {
        dataProcess(result.data);
      } else {
        console.log('msg:', result.msg);
      }
      console.log('loading:', loading);
    },
    onError: (err, params) => {
      console.log('err:', err);
    },
  });
  useEffect(() => {
    run({
      limit: 6,
      ts: new Date().getTime(),
    });
  }, []);

  const dataProcess = (data) => {
    let enterpriseList = data.enterpriseList;
    enterpriseList.forEach((item, index) => {
      item.rank = index + 1;
    });
    setEnterpriseList(enterpriseList);
  };

  const handleClick = (item) => {
    console.log('the clicked company is ', item);
    props.onClick(item);
  };

  return (
    <Card
      title="股权网络层数排行"
      style={{ display: props.isShow ? 'block' : 'none' }}
      loading={loading}
    >
      <List
        dataSource={enterpriseList}
        loading={loading}
        renderItem={(item) => (
          <List.Item>
            <RankItem item={item} onClick={handleClick} />
          </List.Item>
        )}
      ></List>
    </Card>
  );
};

export default RankList;
